<div class="content forum_content">

    {% include "forum/ForumBar.twig" with {
        "forum_bar_buttons_right" : forumBarData.forum_bar_buttons_right,
        "forum_bar_buttons_left" : forumBarData.forum_bar_buttons_left,
        "show_threads" : forumBarData.show_threads,
        "thread_exists" : false,
        "show_filter": false
    } %}

    <h3 style="margin-bottom:10px;"> Manage Categories </h3>

    <div id="manage_categories_view" align="center">
        <div style="max-width: 750px;" align="left">

        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <span  style="float: right;">
                <input id="new_category_text" placeholder="New Category" style="resize:none;" rows="1" type="text" name="new_category" id="new_category" maxlength="50" onkeyup="checkInputMaxLength($(this))" />
                <button type="button" title="Add new category" onclick="addNewCategory('{{ csrf_token }}');" style="margin-left:10px;" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus-circle fa-1x"></i> Add category
                </button>
            </span>
        <pre>(Drag to re-order)</pre><br>
        {% if categories|length == 0 %}
            <span class='category-list-no-element' style="margin-left: 1em;" >
                    No categories exists please create one.
                </span>
        {% endif %}

        <ul id='ui-category-list' style="padding-left: 1em;">
            {# TODO: scrollbar #}
            {% for category in categories %}
                <li id="categorylistitem-{{ category.category_id }}" class="category-sortable" style="color: {{ category.color }};">
                    <i class="fas fa-bars handle" aria-label="Drag to reorder" title="Drag to reorder"></i>
                    <span class="categorylistitem-desc">
                            <span style="word-wrap: break-word;">{{ category.category_desc }}</span>
                            <a class="post_button" title="Edit Category Description" aria-label="Edit Category Description"><i class="fas fa-edit"></i></a>
                        </span>
                    <span class="categorylistitem-editdesc" style="display: none;">
                            <input type="text" placeholder="New Description of Category" style="padding: 0;" maxlength="50" onkeyup="checkInputMaxLength($(this))">
                            <a class="post_button" title="Save Changes" aria-label="Save Changes"><i class="fas fa-check"></i></a>
                            <a class="post_button" title="Cancel Changes" aria-label="Cancel Changes"><i class="fas fa-times"></i></a>
                        </span>
                    <div style="float: right;width: auto;">
                        <select class='category-color-picker' style="color: white;font-size: 14px;height: 18px;padding: 0px;">
                            {% for color_name, color_code in category_colors %}
                                <option value="{{ color_code }}" style="color: white;background-color: {{ color_code }};" {% if color_code == category.color %}selected="selected"{% endif %}>{{ color_name }}</option>
                            {% endfor %}
                        </select>
                        &nbsp;
                        <a class="post_button" title="Delete Category" aria-label="Delete Category"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
            {% endfor %}
        </ul>

        </div>
    </div>
    {# Template Category used to display new categoreis on the client side #}
    <ul id='ui-category-template' style="padding-left: 1em; display: none;">
        <li id="categorylistitem-0" class="category-sortable" style="color: #000000; display: none;">
            <i class="fas fa-bars handle" aria-label="Drag to reorder" title="Drag to reorder"></i>
            <span class="categorylistitem-desc">
                <span style="word-wrap: break-word;">Template</span>
                <a class="post_button" title="Edit Category Description" aria-label="Edit Category Description"><i class="fas fa-edit"></i></a>
                </span>
            <span class="categorylistitem-editdesc" style="display: none;">
                <input type="text" placeholder="New Description of Category" style="padding: 0;" maxlength="50" onkeyup="checkInputMaxLength($(this))">
                <a class="post_button" title="Save Changes" aria-label="Save Changes"><i class="fas fa-check"></i></a>
                <a class="post_button" title="Cancel Changes" aria-label="Cancel Changes"><i class="fas fa-times"></i></a>
                </span>
            <div style="float: right;width: auto;">
                <select class='category-color-picker' style="color: white;font-size: 14px;height: 18px;padding: 0px;">
                    {% for color_name, color_code in category_colors %}
                        <option value="{{ color_code }}" style="color: white;background-color: {{ color_code }};" {% if color_code == category.color %}selected="selected"{% endif %}>{{ color_name }}</option>
                    {% endfor %}
                </select>
                &nbsp;
                <a class="post_button" title="Delete Category" aria-label="Delete Category"><i class="fas fa-trash"></i></a>
            </div>
        </li>
    </ul>
</div>

<script type="text/javascript">
    $(function() {
        $("#ui-category-list").sortable({
            items : '.category-sortable',
            handle: ".handle",
            update: function (event, ui) {
                reorderCategories('{{ csrf_token }}');
            }
        });
        $("#ui-category-list").find(".fa-trash").click(function() {
            var item = $(this).parent().parent().parent();
            var category_id = parseInt(item.attr('id').split("-")[1]);
            var category_desc = item.find(".categorylistitem-desc span").text().trim();
            deleteCategory(category_id, category_desc, '{{ csrf_token }}');
        });
        $("#ui-category-list").find(".fa-edit").click(function() {
            var item = $(this).parent().parent().parent();
            var category_desc = item.find(".categorylistitem-desc span").text().trim();
            item.find(".categorylistitem-editdesc input").val(category_desc);
            item.find(".categorylistitem-desc").hide();
            item.find(".categorylistitem-editdesc").show();

        });
        $("#ui-category-list").find(".fa-times").click(function() {
            var item = $(this).parent().parent().parent();
            item.find(".categorylistitem-editdesc").hide();
            item.find(".categorylistitem-desc").show();
        });

        $("#ui-category-list").find(".fa-check").click(function() {
            var item = $(this).parent().parent().parent();
            var category_id = parseInt(item.attr('id').split("-")[1]);
            var category_desc_original = item.find(".categorylistitem-desc span").text().trim();
            var category_desc = item.find("input").val().trim();
            if(category_desc != category_desc_original) {
                editCategory(category_id, category_desc, null, '{{ csrf_token }}');
            }
            item.find(".categorylistitem-editdesc").hide();
            item.find(".categorylistitem-desc").show();
        });
        var refresh_color_select = function(element) {
            $(element).css("background-color",$(element).val());
        }
        $(".category-color-picker").change(function(color) {
            var category_id = parseInt($(this).parent().parent().attr('id').split("-")[1]);
            var category_color = $(this).val();
            editCategory(category_id, null, category_color, '{{ csrf_token }}');
            refresh_color_select($(this));
        });
        $(".category-color-picker").each(function(){
            refresh_color_select($(this));
        });
    });

    function checkInputMaxLength(obj){
        if($(obj).val().length == $(obj).attr('maxLength')){
            alert('Maximum input length reached!');
            $(obj).val($(obj).val().substr(0, $(obj).val().length));
        }
    }
</script>
